// 自定义全局 v 指令
// 导入监听工具
import { useIntersectionObserver } from '@vueuse/core'
// 给他一个默认图片
import DefaultImg from '@/assets/images/200.png'

// 导入app的类型
import { App } from 'vue'

export default {
    // 语法： app.directive('指令名', 配置对象)
    install(app: App) {
        app.directive('lazy', {
            // (1) 相当于onMounted 生命周期：dom生成的时候执行
            mounted(el: HTMLImageElement, binding) {
                // el: 当前的dom对象
                // binding：里面有个value值，就是指令上绑定的值
                // 当图片没回来的时候，给他一张默认图
                el.src = DefaultImg

                // (2) 这个函数是对 js中 intersectionObserver这个api的一个封装，出自@vueuse/core工具
                // useIntersectionObserver(dom对象， 回调函数) 
                // ([{ isIntersecting }])：相当于解构，是个布尔值，如果为true表示出现在了可视区域
                const { stop } = useIntersectionObserver(el, ([{ isIntersecting }]) => {
                    if (isIntersecting) {
                        el.src = binding.value
                        // 停止监听
                        stop()
                    }
                })

                // error图片在家失败会执行的回调
                // 如果请求图片挂了，在给他一个默认图
                el.addEventListener('error', () => {
                    el.src = DefaultImg
                })
            }
        })
    }
}